import React from 'react';
import { Menu, Icon, Dropdown, Avatar } from 'antd';
import logo from 'assets/logo.svg';
import styles from './index.less';

const menu = (
  <Menu className={styles.menu} selectedKeys={[]}>
    <Menu.Item key="changePassword">
      <Icon type="edit" />Profile
    </Menu.Item>
    <Menu.Divider />
    <Menu.Item key="logout">
      <Icon type="logout" />Sign Out
    </Menu.Item>
  </Menu>
);

export default () => (
  <div className={styles.header}>
    <div className={styles.center}>
      <img className={styles.logo} src={logo} alt=""/>
    </div>
    <div className={styles.right}>
      <Dropdown overlay={menu}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="large" className={styles.avatar} src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
          <Icon type="down" style={{ fontSize: '18px', color: '#666', paddingLeft: '5px'}} />
        </span>
      </Dropdown>
    </div>
  </div>
);
